<!--
 * @Description: 
 * @Author:  huangshuai
 * @Date: 2023-11-06 14:09:52
 * @LastEditTime: 2023-11-06 15:30:12
 * @LastEditors: huangshuai 
-->
<template>
  <div
    style="
      width: 100%;
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
    "
  >
    <el-card style="width: 90%">
      <div
        style="
          width: 100%;
          text-align: center;
          font-size: 50px;
          font-weight: bold;
        "
      >
        中国地图
      </div>
      <div id="aa"></div
    ></el-card>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import * as echarts from "echarts";
// import axios from "axios";
import mapJson from "./mapJson.json";
var myChart: any;
const getMap = () => {
  myChart = echarts.init(document.getElementById("aa"));

  echarts.registerMap("地图", mapJson as any);
  myChart.setOption({
    series: [
      {
        name: "地图",
        type: "map",
        map: "地图",
        itemStyle: {
          areaColor: "#fff",
          borderColor: "black",
          borderWidth: 1,
        },
        label: {
          show: true,
          // color: "#fff",
        },
        data: [],
      },
    ],
  });
  window.addEventListener("resize", function () {
    myChart.resize();
  });
};
onMounted(() => {
  getMap();
});
</script>

<style scoped lang="less">
#aa {
  width: 100%;
  height: 800px;
  // background-color: red;
}
</style>
